<template>
	<w-layout showNavbar navTitle="图鉴" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view class="fr-ac-jsb">
					<view class="flex-1 mr-40">
						<up-tabs
							@change="tabChange"
							:list="tabs.list" 
							:current="tabs.current"
							lineWidth="14"
							lineHeight="14"
							:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
							:activeStyle="{
								color: publicStyles['--color'],
								fontWeight: 'bold',
								transform: 'scale(1.2)'
							}"
							:scrollable="true"
							itemStyle="height: 60px;"
							:inactiveStyle="{
								'font-size': '32rpx',
							}"
						>
						</up-tabs>
					</view>
					<view v-if="type.list && type.list.length" @click="type.show = !type.show" class="public-btn-13 fr-ac px-30 py-14 transition" style="position: relative;">
						<view class="mr-20">
							{{type.list[type.current].name}}
						</view>
						<image v-if="!type.show" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/bottom-fill.png" mode=""></image>
						<image v-else style="width: 24rpx;height: 24rpx;" src="/static/icon/public/top-fill.png" mode=""></image>
						
						<view @click.stop v-if="type.show" class="public-box-10 py-20 w-fit h-fit animate__animated animate__fadeIn" style="position: absolute;right: 0;top: 80rpx;z-index: 88;">
							<view class="px-30" style="width: 260rpx;max-height: 480rpx;overflow-y: scroll;">
								<view @click="typeChange(item,index)" :class="type.current == index?'color':''" class="py-30 u-border-bottom t-c" style="border-color: var(--gray-line) !important;" v-for="(item,index) in type.list" :key="index">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="gap-30 mt-40" style="display: grid;grid-template-columns: repeat(2,1fr);">
					<view @click="openCardPopup(item)" class="public-card-8 fc px-30 py-30" style="min-height: 360rpx;" v-for="(item,index) in state.list" :key="index">
						<image :class="item.jk_display_is != 1?'grayscale':''" style="width: 100%;height: 250rpx;" :src="item.imgurl" mode="widthFix"></image>
						<view class="mt-30 fs-24 ellipsis-2">
							{{item.shang_title}} {{item.title}}
						</view>
					</view>
				</view>
				<no-more :show="state.list.length == 0"></no-more>
				
				
				<popup-good-card
					:show="CardPopup.show"
					:title="CardPopup.title"
					:name="CardPopup.name"
					:src="CardPopup.src"
					:price="CardPopup.price"
					@close="CardPopup.show = false"
				></popup-good-card>
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		cardextractor_goodslist_log
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		if(options.id){
			state.goods_id = options.id
			get_cardextractor_goodslist_log()
		}
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	onReachBottom(()=>{
		if(state.last_limit == state.limit){
			state.page++
			get_cardextractor_goodslist_log()
		}
	})
	
	const page = reactive({
		scrollTop:0
	})
	
	const state = reactive({
		goods_id: '',
		
		list:[],
		page:1,
		limit:12,
		last_limit:12,
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 12
	}
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:0,
				name:'全部',
			},
			{
				id:1,
				name:'已拥有',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
		type.show = false
		initData()
		get_cardextractor_goodslist_log()
	}
	
	const type = reactive({
		current:0,
		show:false,
		list:[]
	})
	function typeChange(item,index){
		console.log(item)
		type.current = index
		type.show = false
		
		initData()
		get_cardextractor_goodslist_log()
	}
	
	async function get_cardextractor_goodslist_log(){
		const res = await cardextractor_goodslist_log({
			shang_id: type.list.length? type.list[type.current].id : 0,
			goods_id: state.goods_id,
			type: tabs.list[tabs.current].id,
			page: state.page,
		})
		state.last_limit = res.goodslist.length
		state.list = state.list.concat(res.goodslist)
		
		type.list = [{
			id: 0,
			name: '全部',
		}].concat(res.category.map(e=>{
			return{
				...e,
				name: e.title
			}
		}))
	}
	
	// 卡片详情
	const CardPopup = reactive({
		show: false,
		title: '图鉴详情',
		name: '',
		src: '',
		price: '',
	})
	function openCardPopup(item){
		CardPopup.show = true
		CardPopup.name = item.title
		CardPopup.src = item.imgurl
		CardPopup.price = item.price
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 40rpx;
		min-height: 100vh;
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
	
	::v-deep .u-number-box__minus,.u-number-box__plus{
		background-color: transparent !important;
	}
	
	.grayscale {
		filter: grayscale(100%);
	}
</style>